<template>
  <Layout>
    <div style="display: flex;justify-content: center;">
      <el-table :data="data">
        <el-table-column prop="id" label="ID"></el-table-column>
        <el-table-column prop="username" label="用户名"></el-table-column>
        <el-table-column prop="age" label="年龄"></el-table-column>
        <el-table-column prop="password" label="密码"></el-table-column>
        <el-table-column
            fixed="right"
            label="操作1"
            width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </Layout>
</template>

<script>
// @ is an alias to /src
import axios from 'axios'
import Layout from "@/components/Layout.vue"
export default {
  components:{
    Layout
  },
  name: 'HomeView',
  data() {
    return {
      data: []
    }
  },
  created() {
    this.getdata()
  },
  methods: {
    //点击按钮后会触发的函数
    handleClick(item) {
      console.log(item)
      //弹出对话框
      this.$confirm('此操作将永久删除ID为' + item.id + '的学生, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {//点击确定
        axios.post("http://localhost:8080/student/deb", item).then(res => {
          //res就是后端返回的数据
          console.log(res)
          if (res.data == "删除成功") {

            this.$message({
              message: '恭喜你，删除成功',
              type: 'success'
            });
            this.getdata()
          } else {
            this.$message.error('删除失败');
          }
          // Ctrl+Alt+L
        })
      }).catch(() => {//点击取消
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
    getdata() {
      axios.get("http://localhost:8080/student/all").then(res => {
        this.data = res.data
        console.log(this.data);
      })
    }
  }

}
</script>
